<template>
  <view v-if="shenheStatus == 0" class="express-page">
    <view class="page-header">
      <view class="list-row express-status">
        <image src="" mode="" />
        <text>{{ expressInfo.status_text }}</text>
      </view>
      <view class="list-row">
        <view class="row-label">{{ $t('person.carrier') }}：</view>
        <view>{{ expressInfo.express }}</view>
      </view>
      <view class="list-row">
        <view class="row-label">{{ $t('clerk.orderNum') }}：</view>
        <view>{{ expressInfo.express_no }}</view>
        <view class="copy-btn" @click="copyText(expressInfo.express_no)">{{
          $t('person.copy')
        }}</view>
      </view>
    </view>

    <!-- 物流时间轴信息 -->
    <view class="page-content">
      <u-time-line>
        <template v-for="(item, index) in expressInfo.list">
          <u-time-line-item :key="index" nodeTop="2">
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:node>
              <view
                class="u-node"
                v-if="index == 0"
                style="background: #19be6b"
              >
                <!-- 此处为uView的icon组件 -->
                <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
              </view>
            </template>
            <template v-slot:content>
              <view>
                <!-- <view class="u-order-title">待取件</view> -->
                <view class="u-order-desc">{{ item.detail }}</view>
                <view class="u-order-time">{{ item.datetime }}</view>
              </view>
            </template>
          </u-time-line-item>
        </template>
      </u-time-line>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: {
    Shenhe,
  },
  data() {
    return {
      expressInfo: null,
    };
  },
  filters: {
    noPassByMobile(str) {
      if (null != str && str != undefined) {
        var pat = /(\d{3})\d*(\d{4})/;
        return str.replace(pat, '$1****$2');
      } else {
        return '';
      }
    },
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t('title.express'),
    });
    try {
      const value = uni.getStorageSync('expressInfo');
      if (value) {
        this.expressInfo = JSON.parse(value);
      }
    } catch (e) {
      // error
    }

    // 使用后，删除缓存
    setTimeout(() => {
      uni.removeStorageSync('expressInfo');
    }, 0);
  },
  methods: {
    copyText(data) {
      uni.setClipboardData({
        data: data,
        success: function () {
          uni.showToast({
            title: this.$t('common.copySuc'),
            icon: 'none',
            duration: 2000,
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.express-page {
  min-height: 100vh;
  background-color: #f2f2f2;

  .page-header {
    padding: 30rpx 36rpx 40rpx 36rpx;
    background: #ffffff;
    border-radius: 0 0 24rpx 24rpx;

    .list-row {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      margin-bottom: 32rpx;

      .row-label {
        font-size: 24rpx;
        font-weight: 400;
        color: #262626;
        margin-right: 46rpx;
      }

      .copy-btn {
        width: 68rpx;
        height: 34rpx;
        background: #f5f5f5;
        border-radius: 17rpx;
        text-align: center;
        line-height: 34rpx;
        margin-left: 13rpx;
      }
    }
    .list-row:last-child {
      margin-bottom: 0;
    }

    .express-status {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;

      image {
        width: 40rpx;
        height: 40rpx;
        background: linear-gradient(-40deg, #f40f07, #fd4214);
        border-radius: 50%;
        margin-right: 13rpx;
      }
    }
  }

  .page-content {
    margin: 40rpx 0;
    padding: 40rpx;
    background: #ffffff;
    border-radius: 24rpx;

    .u-node {
      width: 44rpx;
      height: 44rpx;
      border-radius: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #d0d0d0;
    }

    .u-order-title {
      color: #333333;
      font-weight: bold;
      font-size: 32rpx;
    }

    .u-order-desc {
      color: rgb(150, 150, 150);
      font-size: 28rpx;
      margin-bottom: 6rpx;
    }

    .u-order-time {
      color: rgb(200, 200, 200);
      font-size: 26rpx;
    }
  }
}
</style>
